<template>
  <div>
    <!-- 书单区域 -->
    <a href="/open-collections?from=home">
      <header class="jsx-3032514950 section-header">
          <div class="jsx-3032514950 header-content">
            <h2 class="jsx-3032514950 section-title">书单</h2>
          </div>
          <div class="jsx-3032514950 section-detail-content">
            全部书单
            <svg
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              xmlns="http://www.w3.org/2000/svg"
              class="Icon"
              style="margin-right: -4px"
            >
              <polyline points="9 18 15 12 9 6"></polyline>
            </svg>
          </div>
      </header>
    </a>
    <!-- 图书列表 -->
    <div class="bookList">
      <item v-for="(v,i) in newtext" :key="i" :title="v.title" :text="v.text" :urlimg="v.urlimg" :name="v.name" :desc="v.desc" :background="v.background"/>
    </div>
  <!-- {{ newtext}} -->
  </div>
</template>

<script>
import item from "./item.vue";
export default {
  components: {
    item,
  },
  // 设置钩子函数 调用actions触发异步请求 触发actions的BOOKLIST方法
  mounted(){
        this.$store.dispatch("BOOKLIST");
  },
  computed:{
    // 从vuex中取出数据
    newtext(){
      return  this.$store.state.homeBookList.data
    }
  }
};
</script>

<style>
/* 书单标题样式开始 */
.section-header.jsx-3032514950 {
    display: flex;
    flex-direction: row;
    -webkit-box-align: center;
    align-items: center;
    padding: 15px;
    background: rgb(255, 255, 255);
}
.header-content.jsx-3032514950 {
    -webkit-box-flex: 1;
    flex-grow: 1;
}
.section-title.jsx-3032514950 {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.1;
}
/* 全部书单小箭头 */
.section-detail-content.jsx-3032514950 {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    color: rgb(170, 170, 170);
    flex-shrink: 0;
    font-size: 13px;
}
.Icon {
    vertical-align: text-bottom;
    width: 1.4em;
}
svg:not(:root) {
    overflow: hidden;
}

/* 书单标题样式结束 */
.bookList{
  width: auto;
  overflow-x: auto;
  white-space: nowrap;
}
.bookList::-webkit-scrollbar {
    display: none; /*不展示横向滚动条*/
}



</style>